<template>
  <view class="page-user" :style="{'padding-top':'calc( 498rpx + '+StatusBar+'px)'}">
    <view class="user-section" :style="{'height':'calc( 498rpx + '+StatusBar+'px)'}">
      <view class="bg" :style="{'height':'calc( 416rpx + '+StatusBar+'px)'}"></view>
      <view class="info_box" :style="{'height':'calc( 416rpx + '+StatusBar+'px)'}">
        <view class="flex justify-start align-center text-white" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
          <view class="header-title">
            <view class="cuIcon-back header-left" @tap="back"></view>
            <view class="header-center">{{ i18n['我的钱包'] }}</view>
            <!-- #ifndef MP-WEIXIN -->
            <view @tap="handleJump" data-url="/pages/wallet/account-bind/index" class="header-right">{{ i18n['绑定账号'] }}</view>
            <!-- #endif -->
          </view>
        </view>
        <view class="money-wrap" :style="{ height: 'calc(100% - ' + CustomBar + 'px)' }">
          <!-- #ifdef MP-WEIXIN -->
          <view @tap="handleJump" data-url="/pages/wallet/account-bind/index" class="header-right text-white text-lg mp-wx">{{ i18n['绑定账号'] }}</view>
          <!-- #endif -->
          <view class="money-content">
            <view class="money">{{ money }}</view>
            <view class="desc">{{ i18n['余额（元）'] }}</view>
            <view class="money-btn-wrap">
              <view class="money-btn withdraw" @tap="handleJump" data-url="/pages/wallet/withdraw/index">{{ i18n['提现'] }}</view>
              <view class="money-btn withdraw" @tap="handleJump" data-url="/pages/wallet/recharge/index">{{ i18n['充值'] }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="bg-white look-record">
        <view class="box-center flex justify-between">
          <view class="left_main">{{ i18n['近30天记录'] }}</view>
          <view class="right_main" @tap="handleJump" data-url="/pages/wallet/consumer-detail/index">{{ i18n['查看全部'] }}</view>
        </view>
      </view>
    </view>
    <view class="detaiLiat">
      <view v-if="list.length > 0">
        <view class="itemList">
          <view class="ongg" v-for="(item, index) in list" :key="index">
            <view class="buy-left">
              <view class="share-right" style="overflow: hidden">
                <view class="text-cut-2 desc remark">
                  {{ item.remark || '' }}
               <!--   <text class="status-badge" v-if="item.check_status == 0">({{ i18n['待审核'] }})</text>
                  <text class="status-badge" v-if="item.check_status == 1">({{ i18n['审核通过'] }})</text>
                  <text class="status-badge" v-if="item.check_status == 2">({{ i18n['审核拒绝'] }})</text>
                  <text class="status-badge" v-if="item.check_status == 3">({{ i18n['已完成'] }})</text>
                  <text class="status-badge" v-if="item.check_status == 4">({{ i18n['转账拒绝'] }})</text> -->
                </view>
                <view class="create_time">{{ item.create_time || '' }}</view>
              </view>
            </view>
            <view class="price-right">
              <text v-if="item.after_money - item.before_money > 0" class="margin-left text-red">+{{ item.change_money || 0 }}</text>
              <text v-else class="margin-left">{{ item.change_money || 0 }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 空布局 start-->
      <fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
      <!-- 空布局 end-->
    </view>
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
export default {
  data() {
    return {
      money: '', //余额
      list: [],
      isInit: false,
      page: 1,
      size: 30
    };
  },
  onShow() {
    this.getMoney();
    this.getMoneyList();
  },
  onPullDownRefresh() {
    this.getMoney();
    this.getMoneyList();
  },
  methods: {
    // 金额明细
    getMoneyList() {
      this.$api
        .post(global.apiUrls.getMoneyDetail, {
          type: 0,
          page: this.page,
          list_rows: this.size
        })
        .then(res => {
          this.isInit = true;
          console.log('消费明细', res);
          if (res.data.code == 1) {
            this.list = res.data.data.data;
          }
          uni.stopPullDownRefresh();
        })
        .catch(err => {
          uni.stopPullDownRefresh();
          console.log(err);
        });
    },
    back() {
      uni.navigateBack();
    },
    getMoney() {
      let _this = this;
      _this.$api
        .get(global.apiUrls.getMyMoney, {})
        .then(res => {
          if (res.data.code == 1) {
            _this.money = res.data.data.user_money;
          }
          uni.stopPullDownRefresh();
        })
        .catch(err => {
          uni.stopPullDownRefresh();
          console.log(err, 'get_my_money');
        });
    }
  }
};
</script>

<style lang="scss">
.page-user {
  background: #fff;
  padding-top: 498rpx;
  position: relative;
}

//头部 end
.user-section {
  height: 498rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 416rpx;
    background: $bgtheme;
    .image {
      width: 100%;
      height: 100%;
    }
  }
  .look-record {
    position: relative;
    z-index: 100;
  }
  //金额信息 start
  .info_box {
    height: 416rpx;
    position: relative;
    z-index: 99;

    //金额
    .money-wrap {
      width: 100%;
      position: relative;
      .money-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .money {
          width: 100%;
          text-align: center;
          font-size: 48rpx;
          font-family: Arial;
          font-weight: bold;
          color: #ffffff;
          margin-top: 40rpx;
        }

        .desc {
          width: 100%;
          text-align: center;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          height: 53rpx;
          line-height: 55rpx;
        }

        .money-btn-wrap {
          margin: 50rpx 0 0;
          // padding-bottom: 36rpx;
          display: flex;
          justify-content: space-between;

          .money-btn {
            text-align: center;
            width: 184rpx;
            height: 60rpx;
            background: #ffffff;
            border-radius: 50rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: $theme;
            opacity: 1;
            line-height: 60rpx;
            margin: 0 38rpx;
          }
        }
      }
    }
  }
  //金额信息 end
  .box-center {
    width: 100%;
    height: 72rpx;
    background: rgba($theme, 0.08);
    padding: 0 32rpx;
    color: $theme;
    align-items: center;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
  }
}

//头部 start
.header-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;

  .header-left {
    font-size: 42rpx;
  }

  .header-center {
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC;
    color: #ffffff;
    letter-spacing: 1rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  view {
    width: 33.3%;
  }
}
.header-right {
  font-size: 28rpx;
  font-family: PingFang SC;
  color: #ffffff;
  letter-spacing: 1rpx;
  text-align: right;
  &.mp-wx {
    position: absolute;
    right: 32rpx;
    top: 10rpx;
  }
}
.detaiLiat {
  position: relative;
  width: 100%;
  background-color: #fff;
  .itemList {
    .ongg {
      padding: 28upx 0;
      width: calc(100% - 64rpx);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #eee;

      .buy-left {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        image {
          width: 116rpx;
          height: 116rpx;
          border-radius: 10rpx;
          margin-right: 25rpx;
        }

        .share-right {
          line-height: 53rpx;
          flex: 1;

          .desc {
            font-size: 28rpx;
            font-family: 'PingFang SC';
            /* font-weight: bold; */
            flex: 1;
            color: #333333;
            height: 48rpx;
            line-height: 48rpx;
          }

          .create_time {
            font-size: 24rpx;
            font-family: 'PingFang-SC-Regular';
            color: #999999;
            opacity: 1;
            height: 40rpx;
            line-height: 40rpx;
          }
        }
      }

      .price-right {
        font-size: 32rpx;
        font-family: Arial;
        font-weight: 600;
        color: #333;
        // padding-right: 10rpx;
      }
    }
  }
}
</style>
